<template>
  <div class="particles">
    <span v-for="(particle, index) in particles" :key="index" :style="particleStyle(particle)"></span>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const particles = ref([])
const total = 50

const random = (min, max) => Math.random() * (max - min) + min

const particleStyle = (p) => ({
  left: p.x + 'px',
  top: p.y + 'px',
  width: p.size + 'px',
  height: p.size + 'px',
  animationDelay: p.delay + 's',
  backgroundColor: `rgba(255,255,255,${p.opacity})`
})

onMounted(() => {
  particles.value = Array.from({ length: total }, () => ({
    x: random(0, window.innerWidth),
    y: random(0, window.innerHeight),
    size: random(2, 5),
    delay: random(0, 5),
    opacity: random(0.3, 0.7)
  }))
})
</script>

<style scoped>
.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.particles span {
  position: absolute;
  border-radius: 50%;
  animation: float 20s infinite linear;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.5;
  }
}
</style> 